<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
	<main id='app'>
		<header>
        	<h3>个税计算器</h3>
    	</header>  
    	<input type="number"  id="salary" placeholder="请输入工资" v-model.number='bfoIncome'/>
    	<p v-show='bfoIncome<1500'><b>您的工资小于最低标准</b></p>
    	<div class="list" v-show='bfoIncome>=1500'>
    		<ul>
    			<li>
    				<div>
    					<label>养老保险</label>
    					<input  v-model.number='oldSL'/>
    					<b>%</b>
    				</div>
    				<div>
    					<b>{{bfoIncome*oldSL/100}}</b>
    				</div>
    			</li>
    			<li>
    				<div>
    					<label>医疗保险</label>
    					<input  v-model.number='ylSL'/>
    					<b>%</b>
    				</div>
    				<div>
    					<b>{{bfoIncome*ylSL/100}}</b>
    				</div>
    			</li>
    			<li>
    				<div>
    					<label>失业保险</label>
    					<input   v-model.number='sySL' />
    					<b>%</b>
    				</div>
    				<div>
    					<b>{{bfoIncome*sySL/100}}</b>
    				</div>
    			</li>
    			<li>
    				<div>
    					<label>住房公积金</label>
    					<input   v-model.number='zfSL'/>
    					<b>%</b>
    				</div>
    				<div>
    					<b>{{bfoIncome*zfSL/100}}</b>
    				</div>
    			</li>
    			<li>
    				<div>
    					<label>税前工资</label>
    				</div>
    				<div>
    					<b>{{bfoRes|dataFormatter}}</b>
    				</div>
    			</li>
    			<li>
    				<div>
    					<label>个人所得税</label>
    				</div>
    				<div>
    					<b>{{grsds|dataFormatter}}</b>
    				</div>
    			</li>
    		</ul>
    	</div>
    	<div class="result" v-show='bfoIncome>=1500'>
			<div>
				<b>税后工资</b>
			</div>
			<div>
				<b>{{shgz|dataFormatter}}</b>
			</div>
    	</div>
	</main>
    

    <script src="vue.js"></script>
 	<script src="index.js"></script>
</body>

</html>